import React, { Component } from 'react';
import orderdetail from '../css/Orderdetail.module.css'
import { BrowserRouter as Router, Route, NavLink, Redirect } from 'react-router-dom'
import { Button, Row, Col } from 'antd'

export default class Orderdetail extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <div className={orderdetail.main}>
                    <div className={orderdetail.main}>
                        {/* 订单详情 */}
                        <div className={orderdetail.ordermessage}>
                            <div className={orderdetail.maintop}>
                                <h2>订单详情</h2>
                            </div>
                            <span className={orderdetail.xian}></span>
                            <div className={orderdetail.ordermessagebottom}>
                                <div className={orderdetail.ordertop}>
                                    <div className={orderdetail.ordertopleft}>
                                        <h3>订单信息</h3>
                                        <ul>
                                            <li>
                                                <b>收货地址：</b><span><em>111</em><em>13241344141</em><em>安抚</em></span>
                                            </li>
                                            <li>
                                                <b>订单号：</b><span>2341524561354452</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div className={orderdetail.ordertopright}>
                                        <p><b>订单状态：</b><span>订单取消</span></p>
                                    </div>
                                </div>
                                <span className={orderdetail.xian2}></span>
                                <div className={orderdetail.orderbottom}>
                                    <div className={orderdetail.orderbiaoti}>
                                        <Row>
                                            <Col span={15}>
                                                <Col xs={2} sm={4} md={6} lg={8} xl={15}>
                                                    商品
                                            </Col>
                                                <Col xs={2} sm={4} md={6} lg={8} xl={5}>
                                                </Col>
                                                <Col xs={20} sm={16} md={12} lg={8} xl={4}>
                                                    单价(元)
                                            </Col>

                                            </Col>
                                            <Col span={8}>
                                                <Col span={8}>数量</Col>
                                                <Col span={8}>退换货操作</Col>
                                                <Col span={8}>状态</Col>
                                            </Col>
                                        </Row>
                                    </div>
                                    <span className={orderdetail.xian2}></span>
                                    <div className={orderdetail.orderzhuti}>
                                        <Row>
                                            <Col span={15}>
                                                <Col xs={2} sm={4} md={6} lg={8} xl={15}>
                                                    <Col span={8} ><img src="http://image.fast.126net.cn/group2/M00/01/C2/wKgADlvWqBCANCvuAAAkeEomvDw602.jpg" /></Col>
                                                    <Col span={16} className={orderdetail.erf} >
                                                        <Col span={24} >
                                                            优必选阿尔法Alpha 1P智能机器人玩</Col>
                                                        <Col span={24} className={orderdetail.mouren} >
                                                            默认</Col>
                                                    </Col>
                                                </Col>
                                                <Col xs={2} sm={4} md={6} lg={8} xl={5}>
                                                </Col>
                                                <Col xs={20} sm={16} md={12} lg={8} xl={4}>
                                                    3999
                                                </Col>
                                            </Col>
                                            <Col span={8}>
                                                <Col span={8}>1</Col>
                                                <Col span={8}>不可退换货</Col>
                                                <Col span={8}>订单取消</Col>
                                            </Col>
                                        </Row>
                                    </div>
                                    <span className={orderdetail.xian2}></span>
                                    <div className={orderdetail.orderdetail}>
                                        <Row type="flex" justify="space-between">
                                            <Col span={8}>获得积分<b>3999</b>点</Col>
                                            <Col span={8}>
                                                <ul>
                                                    <li>
                                                        <b>商品总价:</b><span>￥3999.00</span>
                                                    </li>
                                                    <li>
                                                        <b>运费(快递):</b><span>￥0.00</span>
                                                    </li>
                                                    <li>
                                                        <b>订单总价:</b><span>￥3999.00</span>
                                                    </li>
                                                    <li>
                                                        <b>优惠金额:</b><span>￥0.00</span>
                                                    </li>
                                                    <li>
                                                        <b>实付款:</b><span>￥3999.00</span>
                                                    </li>
                                                </ul>
                                            </Col>
                                        </Row>
                                    </div>
                                    <span className={orderdetail.xian2}></span>
                                    <div className={orderdetail.orderbutton}><Button type="primary" size="large">返回</Button></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        )
    }
}